<template>
	<view class="pop">
		<uni-popup ref="popup" background-color="#fff">
			<view class="content">
				<view class="picture">
					<image :src="imgUrl" mode="aspectFill"></image>
				</view>
				<view class="share flex-col-center">
					<view class="share-item flex-col-center" @click="shareWx">
						<image src="@/static/wx.png" mode=""></image>
						<!-- <text>分享到微信</text> -->
						<button open-type="share">分享到微信</button>
					</view>
					<!-- <view class="share-item flex-col-center">
						<image src="@/static/wx_circle.png" mode=""></image>
						<text>分享到朋友圈</text>
						<button open-type="share">分享到朋友圈</button>
					</view> -->
				</view>
				<view class="footer flex-col-between">
					<!-- <view class="ellipsis">分享到朋友圈分享到朋友圈分享到朋友圈分享到朋友圈分享到朋友圈分享到朋友圈</view>
					<tn-button shape="round" backgroundColor="#3B54DA" fontColor="#ffffff"
						@click="copy">复制链接</tn-button> -->
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		shareToWx
	} from "@/common/util/util.js"
	export default {
		name:"my-share",
		data(){
			return{
				imgUrl:'/static/wx.png',
			}
		},
		methods: {
			open(imgUrl) {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
				this.imgUrl = imgUrl;
			},
		
			shareWx() {
				// #ifdef APP-PLUS
					shareToWx()
				// #endif
				// #ifdef MP-WEIXIN
				// uni.hideShareMenu()
					// uni.showShareMenu({
					// 	content:'123456',
					// 	title:'12',
					// 	imageUrl:'/static/car.png',
					// 	path:'/pages/index/index',
					// 	success:function(e){
					// 		console.log('success',e)
					// 	},
					// 	fail:function(e){
					// 		console.log('fail',e)
					// 	},
					// 	complete:function(e){
					// 		console.log('complete',e)
					// 	}
					// })
				// #endif
				
			},
			
			shareCircle() {},
			
			copy() {
				//设置剪切板内容
				uni.setClipboardData({
					data: 'hello',
					success: function() {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 690rpx;
		height: 1062rpx;
		background: #ffffff;
		border-radius: 30rpx;
		overflow: hidden;
	}

	.picture {
		padding-top: 80rpx;
		image {
			display: block;
			margin: 0 auto;
			width: 510rpx;
			height: 724rpx;
			border-radius: 30rpx;
		}
	}

	.share {
		padding: 40rpx 90rpx;

		image {
			width: 72rpx;
			height: 72rpx;
			// margin-right: 20rpx;
		}

		text {
			font-size: $text-size;
			color: #525252;
		}
		button{
			font-size: $text-size;
			color: #525252;
			
		}
		.share-item{
			position: relative;
			image{
				position: absolute;
				left: 0;
				
			}
			button{
				padding-left: 92rpx;
				background-color: transparent;
			}
		}
	}

	.footer {
		height: 106rpx;
		padding: 0 30rpx;
		background-color: #F4F4F4;

		view {
			width: 448rpx;
		}
	}
</style>